import React from 'react'
import '../../assets/css/home/search.less'
import {withRouter} from 'react-router-dom'
class SearchComponent extends React.Component{
    constructor(props){
        super(props)
        this.state={
            typeCheck:false,
            checkTypeId:'all',
            searchData:props.searchData
        }
    }
    componentWillReceiveProps(nextProps, nextContext) {
        this.setState({
            searchData:nextProps.searchData
        })
    }

    //搜索结果
    getSearchData() {
        fetch(
            'http://vueshop.glbuys.com/api/home/goods/search?kwords=' + this.props.inputVal + '&param=&page=1&price1=&price2=&otype='+this.state.checkTypeId+'&cid=&token=1ec949a15fb709370f'
        )
            .then((res) => {
                return res.json()
            })
            .then((res) => {
                console.log(res);
                if (res.code === 200) {
                    this.setState({
                        searchData: res.data
                    })
                }
            })
    }
    checkType(id){
        this.setState({
            typeCheck:false,
            checkTypeId:id,
        },()=>{
            console.log('222');
            this.getSearchData()
        })

    }

    setPath(path,index){
        this.props.history.push({
            pathname:path,
            query:{
                id:index
            }
        })

    }
    render() {
        return(
            <div id='Search'>
                <div className='Search-header'>
                    <div>
                        <div style={this.state.typeCheck?{color:'orange'}:{}}
                            onClick={()=>{
                                this.setState({typeCheck:!this.state.typeCheck})
                            }}
                        >综合
                            {!this.state.typeCheck?
                                <img src="/images/home/goods/down.png" alt=""/>:
                                <img src="/images/home/goods/up.png" alt=""/>
                            }
                        </div>
                        <div
                            style={this.state.checkTypeId==='sales'?{color:'orange'}:{}}
                            onClick={this.checkType.bind(this,'sales')}>销量</div>
                    </div>
                    <div style={this.state.typeCheck?{}:{display:'none'}}>
                        <div
                            style={this.state.checkTypeId==='all'?{color:'orange'}:{}}
                            onClick={this.checkType.bind(this,'all')}>综合</div>
                        <div
                            style={this.state.checkTypeId==='up'?{color:'orange'}:{}}
                            onClick={this.checkType.bind(this,'up')}>价格从低到高</div>
                        <div
                            style={this.state.checkTypeId==='down'?{color:'orange'}:{}}
                            onClick={this.checkType.bind(this,'down')}>价格从高到低</div>
                    </div>
                </div>
                        <div className='search-goods'>
                        {this.state.searchData.map((item,index)=>{
                            return(
                                <div key={index} id='search-good' onClick={this.setPath.bind(this,'/detail',item.gid)}>
                                    <div>
                                        <img src={item.image} alt=""/>
                                    </div>
                                    <div>
                                        <div>
                                            {item.title}
                                        </div>
                                        <div>
                                            ￥{item.price}
                                        </div>
                                        <div>
                                            销量<span>{item.sales}</span>件
                                        </div>

                                    </div>
                                </div>
                            )
                            })}
                        </div>



            </div>
        )
    }
}

export default withRouter(SearchComponent)
